<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
    <GridLayout *tabItem="{title: 'Welcome with social login'}">
        <!-- >> dataentry-wellcome-sociallogin-html -->
        <ScrollView>
            <StackLayout>
                <Image width="210" height="150" class="m-30" src="res://icon"></Image>
                <Button class="btn btn-outline icon btn-active" borderColor="#3B5998" (tap)="onFacebookLoginTap()">
                    <FormattedString>
                            <Span text="&#xea90;" horizontalAlign="left" foregroundColor="#3B5998"></Span>
                            <Span text=" Login with " foregroundColor="#3B5998"></Span>
                            <Span text="Facebook" fontAttributes="Bold" foregroundColor="#3B5998"></Span>
                    </FormattedString>
                </Button>
                <Button color="#3B5998" class="btn btn-outline icon btn-active" borderColor="#d34836" (tap)="onGoogleLoginTap()">
                    <FormattedString>
                            <Span text="&#xea8b;" foregroundColor="#d34836"></Span>
                            <Span text=" Login with " foregroundColor="#d34836"  class="h3"></Span>
                            <Span text="Google +"  foregroundColor="#d34836" fontAttributes="Bold" class="h2"></Span>
                    </FormattedString>
                </Button>
                <Button class="btn btn-primary btn-active" text="Sign up with email" (tap)="inSignUpTap()"></Button>
            </StackLayout>
        </ScrollView>
        <!-- << dataentry-wellcome-sociallogin-html -->
    </GridLayout>

    <GridLayout *tabItem="{title: 'Social Login'}">
        <!-- >> dataentry-sociallogin-html -->
        <ScrollView>
            <StackLayout class="p-5 form">
                <Button class="btn btn-outline icon btn-active" borderColor="#3B5998" (tap)="onFacebookLoginTap()">
                    <FormattedString>
                            <Span text="&#xea90;" horizontalAlign="left" foregroundColor="#3B5998"></Span>
                            <Span text=" Login with " foregroundColor="#3B5998"></Span>
                            <Span text="Facebook" fontAttributes="Bold" foregroundColor="#3B5998"></Span>
                    </FormattedString>
                    </Button>
                <Button color="#3B5998" class="btn btn-outline icon btn-active" borderColor="#d34836" (tap)="onGoogleLoginTap()">
                    <FormattedString>
                            <Span text="&#xea8b;" foregroundColor="#d34836"></Span>
                            <Span text=" Login with " foregroundColor="#d34836"></Span>
                            <Span text="Google +"  foregroundColor="#d34836" fontAttributes="Bold"></Span>
                    </FormattedString>
                </Button>

                <StackLayout class="form">
                    <StackLayout class="input-field">
                        <Label text="Email" class="label" textWrap="true"></Label>
                        <TextField #email hint="Email" text="" class="input input-border" autocorrect="false"></TextField>
                    </StackLayout>
                    <StackLayout class="input-field">
                        <Label text="Email" class="label" textWrap="true"></Label>
                        <TextField #password hint="Password" text="" [secure]="secureproperty" class="input input-border" autocorrect="false"></TextField>
                    </StackLayout>
                    <StackLayout orientation="horizontal">
                        <Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" class="switch"></Switch>
                        <Label text="Show password" class="m-15" verticalAligment="center" textWrap="true"></Label>
                    </StackLayout>
                </StackLayout>

                <Button text="Sign in" (tap)="signin(email.text, password.text)" class="btn btn-primary btn-active"></Button>
                <Button text="Forgot password?" (tap)="forgottenpassword()" class="btn btn-primary btn-active"></Button>
            </StackLayout>
        </ScrollView>
        <!-- << dataentry-sociallogin-html -->
    </GridLayout>
</TabView>